<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
    <meta name="apple-mobile-web-app-status-bar-style" content="#ededed">
    <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico">
    <link rel="bookmark" type="image/x-icon" href="../favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="manifest" href="../manifest.json" />
    <link rel="icon" href="../logo.png" type="image/png" />
    <title>超级配置</title>
    <link rel="stylesheet" href="../js/font-awesome-4.7.0/css/font-awesome.min.css" media="all" />
    <link href="./css/main.css" rel="stylesheet" type="text/css" />
    <!-- <link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css" /> -->
    <link rel="stylesheet" href="../js/vant/index.css" />
</head>

<body>
    <div id="toploading">拼命加载中</div>
    <div id="app">
        <div class="containner-in">
            <van-dialog v-model="oneInput.show" :title="oneInput.title" show-cancel-button @confirm="onOneInputSubmit">
                <van-cell-group>
                    <van-field style="padding:20px;" v-model="oneInput.value" :label="oneInput.label"
                        :placeholder="oneInput.placeholder"></van-field>
                </van-cell-group>
            </van-dialog>
            <div v-if="tabbarIndex==0" class="content" title="项目管理">
                <div v-if="projs.length==0" class="no-data">暂无</div>
                <van-cell :title="t.title" is-link v-for="t in projs" @click="onShowMenu(t,'proj-action')"
                    :value="currProj&&currProj.id==t.id?'✔':''"></van-cell>
                <div class="hold"></div>
                <van-button type="default" class="btn-logout" round icon="plus" @click="addProj">添加项目</van-button>
                <div class="desc-box">
                    <div>说明：</div>
                    <div>嵌入你的系统后台的办法：使用iframe的方式嵌入如下地址：</div>
                    <div>/h5/main.html?design=1&username=用户名&password=密码&pid=项目ID</div>
                    <div>design=0只能配置，design=1可以设计表单</div>
                </div>
            </div>
            <div v-else class="content" :title="tabbarIndex==1?'配置':'设计表单'">
                <div v-if="!currProj" class="no-data">请先选择项目</div>
                <div v-else-if="!currProj.cats||currProj.cats.length==0" class="no-data">暂无表单</div>
                <div v-else class="content-in" :key="cat.cat_name" v-for="cat in currProj.cats">
                    <div class="con-title">{{cat.cat_name}}</div>
                    <div :key="t.id" v-for="(t,index) in cat.configs" class="config-item"
                        @click="tabbarIndex==2?onShowMenu(t,'config-action'):console.log(t)">
                        <div class="input-line">
                            <div class="label">
                                {{t.label}}
                                <span class="label-tips" v-if="t.tips" @click="alert(t.tips,t.label)"><van-icon
                                        name="info-o"></van-icon></span>
                            </div>
                            <div class="control" v-if="t.control_type=='text'">
                                <input v-model="t.value" class="myinput" type="text"
                                    :placeholder="t.placeholder"></input>
                            </div>
                            <div class="control" v-else-if="t.control_type=='number'">
                                <input v-model="t.value" class="myinput" type="number"
                                    :placeholder="t.placeholder"></input>
                            </div>
                            <div class="control" v-else-if="t.control_type=='area'">
                                <textarea v-model="t.value" class="mytextarea" type="text"
                                    :placeholder="t.placeholder"></textarea>
                            </div>
                            <div class="control" v-else-if="t.control_type=='switch'">
                                <van-switch v-model="t.value"></van-switch>
                            </div>
                            <div class="control" v-else-if="t.control_type=='radiobox'">
                                <van-radio-group v-model="t.value">
                                    <van-radio :name="item.value"
                                        v-for="item in t.data_source">{{item.text}}</van-radio>
                                </van-radio-group>
                            </div>
                            <div class="control" v-else-if="t.control_type=='checkbox'">
                                <van-checkbox-group v-model="t.value">
                                    <van-checkbox shape="square" :name="item.value+'/'+item.id"
                                        v-for="item in t.data_source">{{item.text}}</van-checkbox>
                                </van-checkbox-group>
                            </div>
                            <div class="control" v-else-if="t.control_type=='picker'">
                                <div class="picker-box" @click="t.show=true">
                                    <label>{{t.showValue||'请选择'}}</label>
                                    <span><van-icon name="arrow"></van-icon></span>
                                </div>
                                <van-popup v-if="tabbarIndex==1" v-model="t.show" round position="bottom">
                                    <van-picker show-toolbar :columns="t.data_source" @cancel="t.show = false"
                                        @confirm="(c)=>{t.value=c.value;t.showValue=c.text;t.show=false;}"></van-picker>
                                </van-popup>
                            </div>
                            <div class="control" v-else-if="t.control_type=='rate'">
                                <van-rate v-model="t.value" :count="t.data_source?.count||5"
                                    :color="t.data_source?.color||'red'" :size="t.data_source?.size||25"></van-rate>
                            </div>
                            <div class="control" v-else-if="t.control_type=='stepper'">
                                <van-stepper v-model="t.value" :min="t.data_source?.min||1"
                                    :max="t.data_source?.max||100" :step="t.data_source?.step||1"
                                    :default-value="t.data_source?.defaultValue||10"></van-stepper>
                            </div>
                            <div class="control" v-else-if="t.control_type=='slider'">
                                <van-slider v-model="t.value" :min="t.data_source?.min||1"
                                    :max="t.data_source?.max||100" :step="t.data_source?.step||1"></van-slider>
                                    &nbsp;&nbsp;&nbsp;&nbsp;{{t.value}}
                            </div>
                            <div class="control" v-else-if="t.control_type=='color'">
                                <input v-model="t.value" class="myinput" style="width:40px;border-radius:4px;" type="color"
                                    :placeholder="t.placeholder"></input>&nbsp;&nbsp;{{t.value}}
                            </div>
                            <div class="control" v-else-if="t.control_type=='date'">
                                <input v-model="t.value" class="myinput tfl" type="date"
                                    :placeholder="t.placeholder"></input>
                            </div>
                            <div class="control" v-else-if="t.control_type=='time'">
                                <input v-model="t.value" class="myinput tfl" type="time"
                                    :placeholder="t.placeholder"></input>
                            </div>                         
                            <div class="control" v-else-if="t.control_type=='datetime-local'">
                                <input v-model="t.value" class="myinput tfl" type="datetime-local"
                                    :placeholder="t.placeholder"></input>
                            </div>
                            <div class="control" v-else-if="t.control_type=='month'">
                                <input v-model="t.value" class="myinput tfl" type="month"
                                    :placeholder="t.placeholder"></input>
                            </div>
                            <div class="control" v-else-if="t.control_type=='password'">
                                <input v-model="t.value" class="myinput" type="password"
                                    :placeholder="t.placeholder"></input>
                            </div>
                            <div class="control" v-else-if="t.control_type=='tel'">
                                <input v-model="t.value" class="myinput" type="tel"
                                    :placeholder="t.placeholder"></input>
                            </div>
                        </div>
                        <!-- <div class="tips-line" v-if="t.tips"><van-icon name="info-o"></van-icon> {{t.tips}}</div> -->
                    </div>
                </div>
                <div class="hold"></div>
                <van-button v-if="tabbarIndex==1" type="info" round class="btn-logout" icon="passed"
                    @click="onSaveFormContent" :loading="loading" :disabled="loading">保存</van-button>
                <van-button v-else type="default" class="btn-logout" round icon="plus"
                    @click="addConfigRow">添加配置项</van-button>
            </div>
        </div>
        <van-tabbar v-if="params.design" v-model="tabbarIndex" @change="onTabbarChange" :safe-area-inset-bottom="true" :fixed="true">
            <van-tabbar-item icon="cluster-o">项目管理</van-tabbar-item>
            <van-tabbar-item icon="setting-o">配置</van-tabbar-item>
            <van-tabbar-item icon="brush-o">设计表单</van-tabbar-item>
        </van-tabbar>
        <van-action-sheet v-model="menu.show" :actions="menu.actions" @select="onMenuSelect"></van-action-sheet>
        <van-popup v-model="onePicker.show" round position="bottom">
            <van-picker @confirm="onOnePickerConfirm" @cancel="onePicker.show=false" show-toolbar
                :title="onePicker.title" :columns="onePicker.columns" :default-index="2" value-key="label"
                :default-index="value"></van-picker>
        </van-popup>
        <van-dialog v-model="controlEdit.show" :title="controlEdit.title" :show-cancel-button="true"
            :show-confirm-button="true" @confirm="onControlEditSubmit">
            <div class="alert-html">
                <div class="config-item">
                    <div class="input-line">
                        <div class="label">
                            <font>*</font>控件名称
                        </div>
                        <div class="control">
                            <input class="myinput" v-model="controlEdit.form.label" type="text"
                                placeholder="单行文本"></input>
                        </div>
                    </div>
                </div>
                <div class="config-item">
                    <div class="input-line">
                        <div class="label">
                            <font>*</font>分类
                        </div>
                        <div class="control">
                            <input class="myinput" v-model="controlEdit.form.cat_name" type="text"
                                placeholder="分类名称"></input>
                            <span class="right-btn" @click="onStartSelectCat"><van-icon name="arrow"></van-icon></span>
                        </div>
                    </div>
                </div>
                <div class="config-item"
                    v-if="controlEdit.form.control_type=='text'||controlEdit.form.control_type=='number'||controlEdit.form.control_type=='area'">
                    <div class="input-line">
                        <div class="label">
                            校验规则
                        </div>
                        <div class="control">
                            {{controlEdit.form.rule||'无'}}
                            <span class="right-btn" @click="onStartSelectRule"><van-icon name="arrow"></van-icon></span>
                        </div>
                    </div>
                </div>
                <div class="config-item">
                    <div class="input-line">
                        <div class="label">提示</div>
                        <div class="control">
                            <input class="myinput" v-model="controlEdit.form.tips" type="text" placeholder="提示"></input>
                        </div>
                    </div>
                </div>
                <div class="config-item">
                    <div class="input-line">
                        <div class="label">placeholder</div>
                        <div class="control">
                            <input class="myinput" v-model="controlEdit.form.placeholder" type="text"
                                placeholder="placeholder"></input>
                        </div>
                    </div>
                </div>
                <div class="config-item" v-if="controlEdit.needDatasource">
                    <div class="input-line">
                        <div class="label">
                            <font>*</font>数据源
                        </div>
                        <div class="control">
                            <textarea class="mytextarea" v-model="controlEdit.form.data_source" type="text"
                                placeholder="数据源"></textarea>
                        </div>
                    </div>
                    <div class="mini-btn-box">
                        <span @click="onFormatJSON">格式化</span>
                        <span @click="controlEdit.form.data_source=controlEdit.datasourceTips">插入示例</span>
                    </div>
                    <div class="tips-line"><van-icon name="info-o" /> 示例：{{controlEdit.datasourceTips}}</div>
                </div>
            </div>
        </van-dialog>
    </div>
    <script src="../js/jquery.js" charset="utf-8"></script>
    <script src="../js/vue.min.js" charset="utf-8"></script>
    <script src="../js/validator.min.js" charset="utf-8"></script>
    <script src="../js/vant/vant.min.js"></script>
    <script src="../js/moment.js" charset="utf-8"></script>
    <script src="../js/common.js" charset="utf-8"></script>
    <script src="../js/controls.js" charset="utf-8"></script>
    <script src="../js/dal.js" charset="utf-8"></script>
    <script src="../js/store.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/main.js"></script>
</body>

</html>